import { Link } from 'react-router-dom'
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select,Popconfirm,message } from 'antd'
// 时间选择器的汉化语言包
import locale from 'antd/es/date-picker/locale/zh_CN'
import { Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
// import img404 from '../../assets/error'
import error from "../../assets/error.png"
import { useChannel } from '../../hooks/useChannel'
const { Option } = Select
const { RangePicker } = DatePicker
import { getArticleListAPI } from '../../apis/arrticle'
import { useState } from 'react'
import { useEffect } from 'react'
import { deleteArticleAPI } from '../../apis/arrticle'
import { useNavigate } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
const Article = () => {
    const {article}=useChannel()
    // 定义枚举状态
    const status={
        1:<Tag color="warning">未发布</Tag>,
        2:<Tag color="success">已发布</Tag>
    }
    // 删除文章
    const confirm= async(data)=>{
console.log(data.id);
// 当删除完之后才去调用重新渲染的接口
await deleteArticleAPI(data.id)
setReqData({
    ...reqData
})
message.success('删除成功')

    }
    // 调转到编辑页面
    const navigate=useNavigate()

      // 准备列数据
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      width: 120,
      render: cover => {
        return <img src={cover.images[0] || error} width={80} height={60} alt="" />
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 220
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: data => status[data]
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate'
    },
    {
      title: '阅读数',
      dataIndex: 'read_count'
    },
    {
      title: '评论数',
      dataIndex: 'comment_count'
    },
    {
      title: '点赞数',
      dataIndex: 'like_count'
    },
    {
      title: '操作',
      render: data => {
        return (
          <Space size="middle">
            {/* 编辑按钮 */}
            <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={()=>navigate(`/publish?id=${data.id}`)}/>
           {/* 删除按钮 */}
             <Popconfirm
    title="删除文章"
    description="是否确认删除文章?"
    onConfirm={()=>confirm(data)}

    okText="Yes"
    cancelText="No"
  >
    <Button
              type="primary"
              danger
              shape="circle"
              icon={<DeleteOutlined />}
            />
  </Popconfirm>
          </Space>
        )
      }
    }
  ]
  // 准备表格body数据
  const data = [
    {
      id: '8218',
      comment_count: 0,
      cover: {
        images: [],
      },
      like_count: 0,
      pubdate: '2019-03-11 09:00:00',
      read_count: 2,
      status: 2,
      title: 'wkwebview离线化加载h5资源解决方案'
    }
  ]
  // 获取文章列表
  const [list,setList]=useState([])
  const [count,setCount]=useState(0)
    //1.准备接口的参数
    const [reqData,setReqData]=useState({
        status:'',
        channel_id:'',
        begin_pubdate:'',
        end_pubdate:'',
        page:1,
        per_page:4
      })
  useEffect(()=>{
    // 获取列表数据
    async function getList (){
        const res=await getArticleListAPI(reqData)
        setList(res.data.results)
        setCount(res.data.total_count)
       }
    getList()
    // 依赖的数据发生变化时候，useeffect内部的逻辑会重新执行
  },[reqData])
  //筛选文章功能

//  获取筛选数据
const onFinish=(formValue)=>{
    console.log(formValue.date[0].format('YYYY-MM-DD'));
    // 用收集到的表单数据重新改变数组触发调用接口获取新数据
    setReqData({
        // 先把原来的对象的值解构出来，再修改里面的值
        ...reqData,
        channel_id:formValue.channel_id,
        status:formValue.status,
        // begin_pubdate:formValue.date[0].format('YYYY-MM-DD'),
        begin_pubdate:formValue.date[0].format('YYYY-MM-DD'),
        end_pubdate:formValue.date[1].format('YYYY-MM-DD')
        // end_pubdate:formValue.date[1].format('YYYY-MM-DD'),
    })
}
// 点击切换页数时
const onPageChange=(value)=>{
console.log(value);
setReqData({
    ...reqData,
    page:value
})
}
    
  return (
    
    <div>
        {/* 筛选区域 */}
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link> },
            { title: '文章列表' },
          ]} />
        }
        style={{ marginBottom: 20 }}
      >
        <Form initialValues={{ status: '' }} onFinish={onFinish}>
          <Form.Item label="状态" name="status">
            <Radio.Group>
              <Radio value={''}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={2}>审核通过</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="频道" name="channel_id">
            <Select
              placeholder="请选择文章频道"
            //   defaultValue={article[0]}
            
              style={{ width: 120 }}
            >
                {article.map(item=><Option key={item.id} value={item.id}>{item.name}</Option>)}
              {/* <Option value="jack">Jack</Option> */}
             
            </Select>
          </Form.Item>

          <Form.Item label="日期" name="date">
            {/* 传入locale属性 控制中文显示*/}
            <RangePicker locale={locale}></RangePicker>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>
      {/* 文章列表区域 */}
      <Card title={`根据筛选条件共查询到${count}条结果：`}>
        <Table rowKey="id" columns={columns} dataSource={list} pagination={
            {
                total: count,
                pageSize:reqData.per_page,
                onChange:onPageChange
            }
        }/>
      </Card>
    </div>
  )
}

export default Article